import { useEffect, useState, useRef } from 'react'
import './index.less'
import Masonry from 'react-masonry-css'
import { useInView } from 'react-intersection-observer'
import { breakpointColumnsObj } from '@/utils/constant'

import ListCard from '@/components/ListCard'
import { DotLoading, PullToRefresh } from 'antd-mobile'

import { sleep } from 'antd-mobile/es/utils/sleep'
import { ListCardInfo } from '@/types'
import Detail from '@/views/detail'
import { useStore } from '@/store'

function Home() {
  useEffect(() => {
    let mockData = [...images, ...images, ...images, ...images]
    console.log('mockData', mockData)
    // setImages([...mockData])
  }, [])
  const avatar = useStore(state => state.avatar)
  const [count, setCount] = useState(0)
  
  const [images, setImages] = useState([
    {
      id: 1,
      info: {
        id: '2',
        coverUrl:
          'https://images.unsplash.com/photo-1532009324734-20a7a5813719?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    },
    {
      id: '2',
      info: {
        id: '2',
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    },
    {
      id: '2',
      info: {
        id: '2',
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    },
    {
      id: '2',
      info: {
        id: '2',
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    },
    {
      id: '2',
      info: {
        id: '2',
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    },
    {
      id: '2',
      info: {
        id: '2',
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    },
    {
      id: '2',
      info: {
        id: '2',
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar: avatar,
        hot: '11',
        isLike: false
      }
    }
  ])

  const onGoTodetail = (info: ListCardInfo) => {
    console.log('onGoTodetail', info)
    if (detailRef.current) {
      detailRef.current.open(info.id)
    }
  }
  const onLickClick = (info: ListCardInfo, index: number): void => {
    console.log('onLickClick', info)
    let newImages = [...images]
    newImages[index].info.isLike = !newImages[index].info.isLike
    setImages(newImages)
  }
  // 监听触底
  const { ref: loadingRef } = useInView({
    onChange: (inView, entry) => {
      console.log('inView', inView, entry)
      if (inView) {
        fetchList()
      }
    }
  })
  // 请求数据
  const fetchList = () => {
    setImages([...images, ...images])
  }
  // 详情页
  const detailRef = useRef<{ open: (detailId: string) => void } | undefined>(undefined)
  return (
    <div className='homePage'>
      <Detail mRef={detailRef} />
      <PullToRefresh
        onRefresh={async () => {
          await sleep(1000)
        }}
      >
        <Masonry breakpointCols={breakpointColumnsObj} className='myMasonryGrid' columnClassName='myMasonryGridColumn'>
          {images.map((item, index) => {
            console.log(item.id)
            return (
              <ListCard
                key={index}
                info={item.info}
                cardClick={info => onGoTodetail(info)}
                likeClick={info => onLickClick(info, index)}
              />
            )
          })}
        </Masonry>
        <div className='loadMore flex justify-center items-center' ref={loadingRef}>
          <DotLoading />
        </div>
      </PullToRefresh>
    </div>
  )
}

export default Home
